/* pages/personal/personal.wxss */
.personal-container {
  width: 100vw;
  height: 100vh;
  background-image: url('https://hand-in-hand-static.oss-rg-china-mainland.aliyuncs.com/personal/background-image.png');
  background-position: 0 0;
  background-color: #f6f8f9;
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 0 32rpx;
}

/** 基本信息区域 */
.baseinfo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .avatar {
    width: 136rpx;
    height: 136rpx;
    border-radius: 50%;
    background-color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    .avatar-image {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  }
  // width: 104rpx;
  // height: 104rpx;
  // border-radius: 50%;
  // background-color: #123456;
  // flex-shrink: 0;
  

  .baseinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 28rpx;
    flex-grow: 1;
    .login-button {
      font-size: 40rpx;
      font-weight: 700;
      background-color: transparent;
      margin: 0;
    }
    .up {
      display: flex;
      align-items: center;
      gap: 12rpx;
      height: fit-content;
      .username {
        font-size: 40rpx;
        color: #222222;
        line-height: 48rpx;
        font-weight: 500;
      }
      // .gender {
      //   width: 28rpx;
      //   height: 28rpx;
      //   .gender-icon {
      //     width: 100%;
      //     height: 100%;
      //   }
      // }
      .gender-icon {
        width: 28rpx;
        height: 28rpx;
      }
    }
    .middle{
      font-size: 22rpx;
      margin: 10rpx 0;
      display: flex;
      align-items: center;

    }
    .down {
      height: fit-content;
      color: #666666;
      font-size: 22rpx;
      line-height: 32rpx;
      .spliter {
        margin: 0 8rpx;
      }
    }
  }

  .handle-button-container {
    display: flex;
    gap: 16rpx;
    .edit-button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 56rpx;
      background-color: #ffffff;
      border-radius: 28rpx;
      padding: 0 20rpx;
      gap: 8rpx;
      .icon {
        width: 28rpx;
        height: 28rpx;
      }
      text {
        color: #666666;
        font-size: 22rpx;
      }
    }
    .setting-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 56rpx;
      height: 56rpx;
      background-color: #58da73;
      border-radius: 50%;
      .icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

/** VIP区域 */
.vip-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 248rpx;
  border-radius: 32rpx;
  background-color: #ffffff;
  margin-top: 58rpx;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .02);

  .header {
    width: 100%;
    flex-basis: 88rpx;
    flex-shrink: 0;
    image {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
    }
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx;

    .personal-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16rpx;
      flex-basis: 0;
      flex-grow: 1;
      text-align: center;
      .value {
        font-size: 40rpx;
        font-weight: bold;
      }
      .title {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

/** 功能按钮区域 */
.function-container {
  width: 100%;
  height: 360rpx;
  border-radius: 32rpx;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 32rpx;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin: 24rpx 0;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .02);

  .function-button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
    .icon {
      width: 56rpx;
      height: 56rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    text {
      max-width: 8ch;
      text-align: center;
      font-size: 24rpx;
      color: #222222;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 60rpx;
  background-color: rgba(0, 0, 0, 0.4);
  .dialog {
    width: 100%;
    height: 364rpx;
    padding: 64rpx 40rpx 40rpx;
    border-radius: 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    background-image: linear-gradient(to bottom, rgba(255, 204, 0, 0.15), rgba(255, 204, 0, 0));
    .main-title {
      font-size: 40rpx;
      margin-bottom: 32rpx;
      text-align: center;
    }

    .sub-title {
      text-align: center;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 60rpx;
      .email {
        color: #40c05a;
      }
    }

    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
      color: #fff;
      background-color: #58da73;
    }
  }
  
}
.contact-button {
  padding: 5rpx 10rpx;
  background-color: #ffcc00;
  color: #222222;
  font-size: 22rpx;
  font-weight: 500;
  border-radius: 10rpx;
}